<template>
    <div>
        <el-dialog title="发布岗位列表" width="60%" :visible="visible">
            <!-- 使用 el-table 渲染表格 -->
            <el-table :data="deliveryList" border style="width: 100%" :row-style="{ height: '60px' }">
                <el-table-column prop="positionName" label="岗位名称" />
                <el-table-column label="岗位特点">
                    <template slot-scope="scope">
                        {{ scope.row.education }}，{{ scope.row.positionType }}
                    </template>
                </el-table-column>
                <el-table-column label="薪资">
                    <template slot-scope="scope">
                        {{ scope.row.lowestSalaryMonth }} - {{ scope.row.highestSalaryMonth }}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleDelivery(scope.row)" class="delivery-btn">投递简历</el-button>
                        <el-button type="text" @click="handleDetail(scope.row)" class="detail-btn">查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <button @click="handleClose" class="close-btn">关闭</button>
        </el-dialog>
    </div>
</template>

<script>
import { getDeliveryList, deliverPosition } from '@/util/seeker_api/delivery_api'

export default {
    props: {
        id: { type: Number, default: null },
        visible: { type: Boolean, default: false }
    },
    data() {
        return {
            deliveryList: []
        }
    },
    methods: {
        async getDeliveryList() {
            try {
                const response = await getDeliveryList(this.id);
                console.log("获取发布岗位列表", response.data)
                this.deliveryList = response.data;
            } catch (error) {
                console.error('获取发布岗位列表失败:', error);
            }
        },
        handleClose() {
            this.$emit('close');
        },
        async handleDelivery(row) {
            try {
                const response = await deliverPosition(row.positionId);
                this.$store.dispatch('seeker/updateToken', response.data);
                this.$emit('close');
                this.$message.success('投递成功');
            } catch (error) {
                console.error('投递岗位失败:', error);
            }
        },
        handleDetail(row) {

        }
    },
    created() {
        this.getDeliveryList();
    }
}
</script>

<style scoped>
/* 如果你需要对表格进行一些样式调整，可以在这里添加 */
.el-table {
    margin-top: 10px;
}

.close-btn {
    width: 150px;
    height: 40px;
    margin: 20px;
    border: currentColor;
    background: #41968d;
    font-size: 16px;
    color: #fff;
}

.delivery-btn {
    color: #41968d;
}

.detail-btn {
    color: #41968d;
}
</style>